var grid,comboComune,comboFiume,comboVulnerabilita;

/*
ComboBox per il grado di vulnerabilità
*/
var vulnerabilitaStore = new Ext.data.JsonStore({
                            data: datiCombo,
                            fields: ['Vulnerabilita','Fiume','GradoVulnerabilita'],
                            idProperty : 'GradoVulnerabilita'
});
vulnerabilitaStore.sort('GradoVulnerabilita','ASC');
comboVulnerabilita = new Ext.form.ComboBox({
                   fieldLabel: 'Vulnerabilit&agrave;',
                   store: vulnerabilitaStore,
                   displayField:'Vulnerabilita',
                   typeAhead: true,
                   mode: 'local',
                   forceSelection: true,
                   triggerAction: 'all',
                   selectOnFocus:true,
                   lastQuery: '',
                   layout:'form',
                   listeners:{
                       'select': function(){
                           comboComune.enable();
                           console.log(this.value);
                           updateComboComune(this.value);
                       }
                   }
});
/*
 * Combobox Comuni
 */

var comuniStore = new Ext.data.JsonStore({
        data:datiCombo,
        fields: ['Vulnerabilita','Comune','codiceComune']
    });
comuniStore.sort('codiceComune','DSC');
comboComune = new Ext.form.ComboBox({
    fieldLabel: "Comune",
    store: comuniStore,
    id: 'ComuneComboBox',
    displayField:'Comune',
    typeAhead: true,
    mode: 'local',
    forceSelection: true,
    triggerAction: 'all',
    selectOnFocus:true,
    disabled:true,
    //applyTo: 'local-comuni',
    lastQuery: '',
    layout:'form',
    listeners:{
	    'select': function() {
                        comboFiume.enable();
                        console.log(this.value);
			updateComboFiume(this.value);
	    }
    }
    });

var fiumiStore = new Ext.data.JsonStore({
        data: datiCombo,
        fields: ['Comune','Fiume', 'codiceFiume']
});
fiumiStore.sort('codiceFiume','DSC');
comboFiume = new Ext.form.ComboBox({
    fieldLabel: "Corso d'acqua",
    store: fiumiStore,
    id : 'FiumeComboBox',
    displayField:'Fiume',
    typeAhead: true,
    mode: 'local',
    forceSelection: true,
    triggerAction: 'all',
    selectOnFocus:true,
    applyTo: 'local-fiumi',
    lastQuery: '',
    layout:'form',
    disabled:true,
    listeners:{
		'select': function() {
					updateCombo(this.displayField,this.value);
				}
    }
});


/*
Griglia centrale
*/

//JsonStore
var grigliaStore = new Ext.data.JsonStore({
    fields: ['Fiume','strada','Comune','catastale','Vulnerabilita'],
    data: datiGrid
});

//Selection model

var genericHandler = function(menuItem) {
        Ext.MessageBox.alert('', 'Apri ' + menuItem.text);
}

grid = new Ext.grid.GridPanel({
        store: grigliaStore,
        columns: [
	{header: 'Codice catastale', dataIndex: 'catastale', sortable:true},
        {header: 'Fiume',  dataIndex: 'Fiume', sortable:true},
        {header: 'Strada', dataIndex: 'strada', sortable:true},
        {header: 'Comune', dataIndex: 'Comune',sortable:true},
        {header: 'Vulnerabilit&agrave;',dataIndex:'Vulnerabilita',sortable:true} 
    ],
    title: 'Tabella',
    stripeRows: true,
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    viewConfig : {forceFit:true},
    buttons: [{text:'Esporta elenco in PDF',iconCls:'pdf'},{text:'Esporta elenco in Excel',iconCls:'excel'}],
    buttonAlign:'center',
    tbar:[{
		xtype: 'tbbutton',
                id: 'menu-sezioni',
		name: 'menu-sezioni',
		text: 'Visualizza sezioni',
		iconCls: 'info',		disabled: true,
			menu: [{
				text: 'Sezione 1',
				handler : genericHandler
				},{
				text: 'Sezione 2',
				handler : genericHandler,
				},{
				text: 'Sezione 3',
				handler : genericHandler
				}]
	},{
	    text:'Visualizza sulla mappa',
	    id:'visualizza-sulla-mappa',
	    disabled: true,
	    tooltip:'Visualizza l\'elemento sulla mappa',
	    handler: function() {
	        var row = grid.selModel.getSelections();
		var catastale = row[0].data.catastale;
                zoomToSelection(catastale);
                Ext.getCmp('tab-mappe').setActiveTab(1);
	    }
	},
	'->',
	{
            text:'Annulla selezione',
            id:'annulla-selezione',
	    disabled: true,
	    handler: function() {
                Ext.getCmp('menu-sezioni').disable();
                Ext.getCmp('visualizza-sulla-mappa').disable();
                grid.selModel.clearSelections();
                this.disable()
            }, 
            tooltip:'Cancella selezione dalla tabella. Equivalente a fare ctrl+click sulla riga selezionata'
        }]
});

grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
    Ext.getCmp('menu-sezioni').enable();
    Ext.getCmp('annulla-selezione').enable();
    Ext.getCmp('visualizza-sulla-mappa').enable();
    //alert(r.data.catastale);
});

var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
                region: 'north',
		height: 32, // give north and south regions a height
                contentEl:'north'
		
            }), {
                // lazily created panel (xtype:'panel' is default)
                region: 'south',
                contentEl: 'south',
		align: 'center',
                split: true,
                height: 30,
                minSize: 30,
                maxSize: 30,
                margins: '0 5 0 0'
            }, {
                region: 'east',
                title: 'Guida in linea',
                iconCls: 'help',
                collapsible: true,
		collapsed: false,
                split: true,
                width: 200, // give east and west regions a width
                minSize: 175,
                maxSize: 400,
                margins: '0 5 0 0',
                layout: 'fit', // specify layout manager for items
                items:            // this TabPanel is wrapped by another Panel so the title will be applied
                new Ext.TabPanel({
                    border: false, // already wrapped so don't add another border
                    activeTab: 0, // second tab initially active
                    tabPosition: 'bottom',
                    items: [{
                        html: '<p>Parliamo dell\'introduzione</p>',
                        title: 'Introduzione',
                        autoScroll: true
                    }, {
			html: '<p>Parliamo dell\'esportazione dei risultati</p>',
			title: 'Esportazione',
			autoScroll:true
			}]
                })
            }, {
                region: 'west',
                id: 'west-panel',
                title: 'Filtri',
		iconCls: 'find',
                split: true,
                width: 300,
                minSize: 300,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 0',
                xtype: 'form',
                frame: true,
                defaults: {anchor:'-20'},
		items:[
                        comboVulnerabilita,
			comboComune,
			comboFiume
//			new Ext.Button({text:'Resetta filtri'})
		]
	    },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            new Ext.TabPanel({
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                id: 'tab-mappe',
                activeTab: 0,     // first tab initially active
                items: [
			grid,
			mapPanel
//	    {
//			 id: "mappanel",
//            title: "Map",
//           xtype: "gx_mappanel",
//            map: map,
//            layers: [layer],
//            extent: extent,
//            split: true
	
//                }
]
            })]
        });


//Seleziona qualsiasi
comboFiume.setValue('Qualsiasi');
comboComune.setValue('Qualsiasi');
comboVulnerabilita.setValue('Qualsiasi');
